<template>
    <div class="app-container">
      <el-container>
        <el-header>
          <!--最上面的大标题-->
          <el-card shadow="hover">
            <el-row>
              <el-col :span="19">
                <div class="tittle">
                 {{ $route.query.courseName }}: {{ this.ShowInfo.videoname }}
                </div>
              </el-col>
              <el-col :span="5">
                <el-button type="warning" plain :disabled="$hasBP('bnt.course.judgement')  === false" @click="GetStarInfo()">评价课程</el-button>
                <el-button type="primary" plain :disabled="this.Panelpremission" @click="DetailPanel()">课程面板</el-button>
              </el-col>
            </el-row>

          </el-card>
        </el-header>
        <el-main>
          <el-row>
            
            <el-col :span="16">
              <!--左边的视频区域-->
              <el-card class="box-card" :key="video.url" shadow="hover">
                  <div class="video">
                    <div>
                      <vueMiniPlayer 
                      ref="vueMiniPlayer"
                      :video="video" 
                      :mutex="true" 
                      @fullscreen="handleFullscreen"/>
                    </div>
                  </div>
              </el-card>
              <!--左下的视频info区域-->
              <el-card class="video-info" shadow="hover">
                上传者: {{ this.ShowInfo.name }}
                <br>
                简介:{{ this.ShowInfo.description }}
              </el-card>

            </el-col>
            <!--右边列表区域-->
            <el-col :span="8">
              <el-card shadow="hover">
                  <!--表格-->
                  <template>
                    <el-table
                      @row-click="ChangeVideo"
                      :data="VideoList"
                      style="width: 100%"
                      max-height="500">
                      <el-table-column
                        prop="videoname"
                        label="视频列表"
                        >
                      </el-table-column>
                    </el-table>
                  </template>
              </el-card>
              <el-card shadow="hover">
                <span class="demonstration">
                  课程平均分
                </span>
                <el-rate
                  v-model="getStar"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}">
                </el-rate>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>

        <el-dialog title="打分" :visible.sync="dialogFormVisible">
          <el-form :model="Star">
              <span class="demonstration">
                为该课程打分
              </span>
              <el-rate v-model="Star.star">
              </el-rate>
            <el-form-item label="评价">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="Star.description">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="doStar()">确 定</el-button>
          </div>
        </el-dialog>

    </div>
  </template>


  <script>
  import api from '@/api/LearnSpace/Video'
  import capi from '@/api/LearnSpace/Course'
  export default {
    // name: 'roleAuth',
    data() {
        return {
            video: {
                url: '',
                muted: false,
                loop: false,
                preload: 'auto',
                poster: '',
                volume: 1,
                autoplay: true
            },
            VideoList:[{

            }],
            SelectVideoVo:{ //条件选择器
              id:'',
              courseId:'',
              videoname:'',
              upid:'',
            },
            options: [{ //教师条件选择器
              id: '',
              name: ''
            }],
            ShowInfo:{
              name:'',
              description:'',
              videoname:''
            },
            Star: {
              star:null,
              description:''
            },
            Panelpremission: true , //查看面板权限
            dialogFormVisible: false,//打分
            getStar:'',
        }
    },
    computed: {
      $video() {
        return this.$refs.vueMiniPlayer.$video;
      }
    },
    created() {
      api.GetId().then(resp=>{
      if(this.$hasBP('bnt.Course.panel')||resp.data === this.$route.query.teacherId ){
        this.Panelpremission = false
      }
      this.fetchData()
    })
    },
    methods: {
      fetchData(){
        capi.SelectNameAndId().then(response=>{
          this.options=response.data
        })
        capi.GetStar(this.$route.query.id).then(resp => {
          this.getStar = resp.data
        })
        this.SelectVideoVo.courseId = this.$route.query.id
        api.getPageList(this.SelectVideoVo).then(resp => {
        this.VideoList = resp.data
        //获取第一个元素，对页面进行初始化
        this.ShowInfo.name = resp.data[0].name
        this.ShowInfo.description = resp.data[0].description
        this.ShowInfo.videoname=resp.data[0].videoname
        this.video.url=resp.data[0].url

      })
      },
      ChangeVideo(row, column, event){
        this.video.url=row.url
        this.ShowInfo.name = row.name
        this.ShowInfo.description = row.description
        this.ShowInfo.videoname=row.videoname
      },
      handleFullscreen(){

      },
      //详细面板
      DetailPanel(){
        const id = this.$route.query.id
        const courseName = this.$route.query.courseName
        this.$router.push('/LearnSpace/VideoPanel?id='+id+'&courseName='+courseName);
      },
      //评价课程
      doStar(){
        capi.doStar(this.$route.query.id,this.Star).then(resp=>{
            this.$message({
            type: 'success',
            message: '评价成功!'
          });
          this.dialogFormVisible = false
        })
      },
      //评价课程的数据回显
      GetStarInfo(){
        this.dialogFormVisible = true
        capi.GetStarInfo(this.$route.query.id).then(resp=>{
          if(resp.data != null){
            this.Star = resp.data
          }

        })
      }

    }
  };
</script>
<style scoped>
.tittle{
  font-family: "Helvetica Neue";
  font-size: 30px;
  color:rgb(50, 127, 157)
}
.searchVideo{
  font-family: "Hiragino Sans GB";
  font-size: 1em;
  color: #909399;

}
.demonstration{
  font-size: large;
}
/* .inVideo{
  width: auto;
  max-height: auto;
} */
</style>